<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Canvas Drawing</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="800" height="400" style="width: 800px; height: 400px;"></canvas>

    <div>
        <!-- 文本输入框 -->
        <textarea id="textInput" placeholder="Enter text...">我是文字</textarea>

        <!-- 下拉选择框来设置文本对齐方式 -->
        <select id="textAlignment">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
        </select>

        <!-- 添加图片和文本的按钮 -->
        <button id="addButtonText">Add Text</button>
        <button id="setButtonText">Set Text</button>
        <button id="addButtonImage">Add Image</button>
    </div>

    <div style="margin-top: 10px;">
        <!-- 下拉选择框来设置文本对齐方式 -->
        <select id="exportScale">
            <option value="1">1倍</option>
            <option value="2">2倍</option>
            <option value="3">3倍</option>
        </select>

        <!-- 添加图片和文本的按钮 -->
        <button id="exportButton">导出为图片</button>
    </div>

    <div style="margin-top: 10px;">
        <button id="toJSON">toJSON</button>
        <!-- 文本输入框 -->
        <textarea id="JSONInput" placeholder="Enter JSON..."></textarea>
        <button id="loadFromJSON">loadFromJSON</button>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="Canvas.js"></script>
    <script src="Wedge.js"></script>
    <script src="ImageWedge.js"></script> <!-- 假设这是处理图片对象的类 -->
    <script src="TextWedge.js"></script> <!-- 假设这是处理文本对象的类 -->
    <script src="ControlButton.js"></script>
    <script src="myScript.js"></script> <!-- 新的JavaScript文件来处理按钮和输入 -->
</body>

</html>